<template>
  <a-popover
    :placement="'right'"
    trigger="hover"
    :visible="hovered"
    @visibleChange="handleHoverChange"
  >
    <!-- <span slot="title">数据预览</span>-->
    <div slot="content" class="popover-content">
      <!-- <div>字段名推荐：{{currentClause.headerScore.toFixed(2)}}</div>-->
      <!-- <div>字段值推荐：{{currentClause.valueScore.toFixed(2)}}</div>-->
      <!--   header   -->
      <div class="detail-header">
        <div class="header-left" :style="{ color: leftColor }">
          {{
            currentClause.leftHeaderName
              ? currentClause.leftHeaderName
              : '请选择列'
          }}
        </div>
        <div class="vertical-divider"></div>
        <div class="header-right" :style="{ color: rightColor }">
          {{
            currentClause.rightHeaderName
              ? currentClause.rightHeaderName
              : '请选择列'
          }}
        </div>
      </div>
      <a-spin :spinning="detailLoading" :delay="500">
        <div class="column-detail">
          <div class="column-detail-show">
            <div class="left">
              <div
                v-for="(item, index) in leftDetail"
                :key="`left-detail-${item}-${index}`"
                class="item"
                :title="item"
              >
                {{ item }}
              </div>
              <div v-if="!currentClause.leftHeaderName" class="empty-column">
                -- 空 --
              </div>
            </div>
            <div class="vertical-divider"></div>
            <div class="right">
              <div
                v-for="(item, index) in rightDetail"
                :key="`right-detail-${item}-${index}`"
                class="item"
                :title="item"
              >
                {{ item }}
              </div>
              <div v-if="!currentClause.rightHeaderName" class="empty-column">
                -- 空 --
              </div>
            </div>
          </div>
        </div>
      </a-spin>
    </div>
    <a-icon-font class="name-text" type="iconyulan" />
  </a-popover>
</template>

<script lang="ts">
/**
 * 联接字句 detail
 */
import { Vue, Component, Prop } from 'vue-property-decorator'
import { apiGetTableData } from '@/api/data-clean'

@Component({
  components: {},
})
export default class PopoverDetail extends Vue {
  @Prop({ type: Object, default: () => ({}) }) currentClause!: any // 联接子句
  @Prop({ type: Array, default: () => [] }) input!: any[] // 联接子句
  @Prop({ type: String, default: '' }) parentId!: any // 当前 join 节点 parentId
  @Prop({ type: Number, default: 0 }) taskId!: number // 当前节点Id
  @Prop({ type: String, default: '#757070' }) leftColor!: string
  @Prop({ type: String, default: '#757070' }) rightColor!: string

  private hovered: boolean = false // 气泡卡片显示状态
  private leftDetail: any[] = [] // 左表列详细字段
  private rightDetail: any[] = [] // 右表列详细字段
  private detailLoading: boolean = false

  /**
   * 气泡卡片状态改变
   * @param visible
   */
  public async handleHoverChange(visible: boolean) {
    this.hovered = visible
    if (visible) {
      this.detailLoading = true
      this.leftDetail = this.currentClause.leftHeaderName
        ? await this.getColumnDetail({
            name: this.currentClause.leftHeaderName,
            taskId: this.parentId?.split(',')[0],
            table: this.input[0].tableName,
          })
        : []
      this.rightDetail = this.currentClause.rightHeaderName
        ? await this.getColumnDetail({
            name: this.currentClause.rightHeaderName,
            taskId: this.parentId?.split(',')[1],
            table: this.input[1].tableName,
          })
        : []
      this.detailLoading = false
    }
  }
  /**
   * 获取列名对应的详细内容
   */
  public async getColumnDetail(data?: any) {
    const { name, table } = data
    const response: any = await apiGetTableData({
      data: {
        curPage: 1,
        pageSize: 10,
        name: '_record_id_',
        taskId: data.taskId ? data.taskId : this.taskId,
        filter: [],
        table,
      },
    })
    if (response.status === 200 && response.data.success) {
      const { result } = response.data
      // const columnIndex = result.head.findIndex((item: any) => item.name === name)
      return result?.data.map((item: any) => item[name])
    }
    return []
  }
}
</script>

<style lang="less" scoped>
.name-text {
  font-size: 16px;
}

.popover-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 264px;
  justify-content: space-between;
  overflow: hidden;

  // 自定义 表头
  .detail-header {
    display: flex;
    height: 24px;
    justify-content: space-between;

    .header-left,
    .header-right {
      font-size: 12px;
      line-height: 24px;
      overflow: hidden;
      padding: 0 10px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 70px;
    }

    .header-left {
      margin-right: 10px;
    }

    .vertical-divider {
      border-right: 1px solid #e9e9e9;
      width: 2px;
    }
  }

  // 详细内容
  .column-detail {
    align-items: center;
    display: flex;
    height: 240px;
    justify-content: center;
    overflow: hidden;

    .column-detail-show {
      display: flex;
      font-size: 12px;
      height: 240px;
      justify-content: space-between;

      .left,
      .right {
        height: 100%;
        width: 70px;

        .empty-column {
          color: #9b9da8;
          font-size: 12px;
          text-align: center;
        }
      }

      .left {
        margin-right: 10px;
      }

      .item {
        font-size: 12px;
        line-height: 24px;
        overflow: hidden;
        padding: 0 10px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .vertical-divider {
        border-right: 1px solid #e9e9e9;
        width: 2px;
      }
    }
  }
}
</style>
